<template>
  <view class="container">
    <scroll-view scroll-y="true" style="width: 100%; height: 100vh">
      <!-- 搜索 -->
      <view class="search">
        <image src="../../static/icon/grarysearch.png" mode="aspectFill" style="width: 40rpx; height: 40rpx; margin-left: 30rpx"></image>
        <input type="text" placeholder="搜索教师或科目" class="ipt" @input="getsearchlist" v-model="name" @blur="fnblur" />
      </view>
      <!--  -->
      <!-- 历史记录 -->
      <view class="jilu">
        <view class="title">历史搜索</view>
        <image src="../../static/icon/del.png" mode="aspectFill" style="width: 40rpx; height: 40rpx" @click="$refs.history.open()"></image>
      </view>
      <!-- 历史记录 -->
      <view style="box-sizing: border-box; padding: 30rpx; width: 100%">
        <text class="history" v-for="(item, index) in historylist" :key="index" @click="historsearch(item)">{{ item }}</text>
      </view>
      <!-- 搜索的数据列表 -->
      <scroll-view scroll-y="true" style="width: 100%; height: 910rpx" @scrolltolower="addmore">
        <view class="teacherlist" v-if="datalist.length != 0">
          <view class="listitem" v-for="item in datalist" :key="item.id" @click="godetail(item)">
            <image :src="imgUrl + item.avatar" mode="aspectFill" style="width: 186rpx; height: 186rpx"></image>
            <view class="right">
              <view class="righttop">
                <view style="display: flex; align-items: center">
                  <view class="username">{{ item.byname }}</view>
                  <view class="usercareer">{{ item.identity_name }}</view>
                </view>
                <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 26rpx; color: #222222">{{ item.host_grade + '/' + item.host_subject }}</view>
              </view>
              <view class="rightmiddel">
                <view class="teachage">教龄{{ item.teaching_len }}年</view>
                <view class="money">￥{{ item.price }}/起</view>
              </view>
              <view class="rightbottom">
                <view class="hobbylist">
                  <!-- <view class="hobbyitem">学习能力</view> -->
                </view>
                <view class="long">{{ item.distance }}km</view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <!-- 删除历史记录弹层 -->
      <uni-popup ref="history" type="center">
        <view class="delbox">
          <view style="text-align: center; font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 30rpx; color: #000000">确认删除</view>
          <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 28rpx; color: #000000; text-align: center; margin-top: 70rpx; margin-bottom: 70rpx">
            确认删除全部历史搜索记录
          </view>
          <view class="btn">
            <view class="cancelbtn" @click="$refs.history.close()">取消</view>
            <view class="okbtn" @click="delhistory">确认</view>
          </view>
        </view>
      </uni-popup>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: '',
      historylist: [],
      datalist: [],
      page: 1,
      name: ''
    };
  },
  methods: {
    // 点击历史记录搜索
    historsearch(item) {
      console.log('历史记录', item);
      this.name = item;
      this.getsearchlist();
    },
    // 跳转到教师详情
    godetail(item) {
      console.log(item);
      uni.redirectTo({
        url: '/parents/teacherdetail/teacherdetail?id=' + item.id
      });
    },
    // 删除历史记录
    delhistory() {
      this.$refs.history.close();
      this.historylist = [];
      uni.setStorageSync('historysearch', JSON.stringify(this.historylist));
    },
    // 输入框失焦
    fnblur() {
      // this.getsearchlist();
      if (this.historylist.length > 10) {
        this.historylist.splice(this.historylist.length - 1, 1);
      }
      this.historylist.unshift(this.name);
      uni.setStorageSync('historysearch', JSON.stringify(this.historylist));
    },
    // 搜索获取教师列表
    getsearchlist() {
      if (this.name == '') {
        this.datalist = [];
        return;
      }
      uni.getLocation({
        success: async (res2) => {
          const res = await uni.$http.post('/patriarch/list', {
            page: this.page,
            name: this.name,
            lat: res2.latitude,
            lon: res2.longitude
          });
          console.log(res);
          this.datalist = res.data.data.list;
        }
      });
    },
    // 触底加载更多
    addmore() {
      this.page++;
      this.getsearchlist();
    }
  },
  onLoad() {
    // 配置头像的基地址
    this.imgUrl = this.imgurl;
    // 获取本地存储的历史记录
    if (uni.getStorageSync('historysearch')) {
      this.historylist = JSON.parse(uni.getStorageSync('historysearch'));
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .search {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 690rpx;
    height: 80rpx;
    margin: 20rpx 30rpx;
    background: #fafafa;
    border-radius: 100rpx;
    .ipt {
      padding-left: 20rpx;
    }
  }
  .jilu {
    box-sizing: border-box;
    margin: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
    }
  }
  .history {
    box-sizing: border-box;
    height: 56rpx;
    padding: 8rpx 20rpx;
  }
  .delbox {
    box-sizing: border-box;
    width: 690rpx;
    height: 400rpx;
    padding: 40rpx;
    background: #ffffff;
    border-radius: 30rpx;
    .btn {
      display: flex;
      .cancelbtn {
        width: 300rpx;
        height: 90rpx;
        text-align: center;
        line-height: 90rpx;
        background: #f1f1f1;
        color: #000000;
        border-radius: 100rpx;
      }
      .okbtn {
        width: 300rpx;
        height: 90rpx;
        text-align: center;
        line-height: 90rpx;
        background: #3553e8;
        color: #fff;
        border-radius: 100rpx;
      }
    }
  }
  .listitem {
    box-sizing: border-box;
    display: flex;
    width: 750rpx;
    height: 190rpx;
    padding: 0 27rpx;
    margin-bottom: 30rpx;
    .right {
      flex: 1;
      margin-left: 20rpx;
      .righttop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .usercareer {
          box-sizing: border-box;
          width: 104rpx;
          height: 40rpx;
          background: #eaedfd;
          border-radius: 10rpx 10rpx 10rpx 10rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #3553e8;
          text-align: center;
          line-height: 40rpx;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .username {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 28rpx;
          color: #222222;
          margin-right: 14rpx;
        }
      }
      .rightmiddel {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 12rpx;
        .teachage {
          font-weight: 500;
          font-size: 26rpx;
          color: #222222;
        }
        .money {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 24rpx;
          color: #ff3400;
        }
      }
      .rightbottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 40rpx;
        .hobbylist {
          display: flex;
          align-items: center;
          .hobbyitem {
            box-sizing: border-box;
            height: 40rpx;
            background: #ffffff;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            border: 1rpx solid #3553e8;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 22rpx;
            color: #3553e8;
            margin-right: 10rpx;
            text-align: center;
            line-height: 30rpx;
            padding: 4rpx 12rpx;
            text-overflow: ellipsis; /* 溢出显示省略号 */
            overflow: hidden; /* 溢出隐藏 */
            white-space: nowrap; /* 强制不换行 */
          }
        }
        .long {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #222222;
        }
      }
    }
  }
}
</style>
